<template>
  <div>
    <div class="wwheader">
      <a href=""
        ><img @click="wwdij" src="../assets/img/左箭头(1).png" alt=""
      /></a>
      <p>明细查询</p>
      <div class="wwheaderright">
        <img src="../assets/img/定位1.png" alt="" />
        <img src="../assets/img/定位1.png" alt="" />
      </div>
    </div>
    <div class="wwheaderbottom">
      <div class="wwheaderbottomleft">
        <img src="../assets/img/定位1.png" alt="" />
        <p>6228****2372</p>
      </div>
      <div class="wwheaderbottomright">
        <p>人名币 | 本币</p>
        <img src="../assets/img/小三角down(1).png" alt="" />
      </div>
    </div>
    <ul class="wwdate">
      <li class="jyz">近一周</li>
      <li>近一月</li>
      <li>近三月</li>
      <li class="wwlast">
        <a href="">
          <p @click="sshi1">筛选</p>
          <img src="../assets/img/小三角down(1).png" alt="" />
        </a>
      </li>
    </ul>
    <ul class="wwsection" id="seul">
      <li class="wwsection1">
        <div
          id="wzyamoney"
         
          v-for="(item, index) in zhifu"
          :key="index" 
          @click="dianji(item)"
        >
          <div class="sectionleft">
            <p style="display: none">{{ item.id }}</p>
            <p class="wwWeChat" >项目：{{ item.descs }}</p>
            <p class="wwWeChat1">{{ item.createTime }}</p>
          </div>
          <div class="wwsectionright">
            <p class="wwWeChat2">{{ item.tradeAmt }}元</p>
            <!-- <p class="WeChat3">余额</p> -->
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//明细查询
import { ff } from "../api/detail";
import { Dialog } from "vant";
export default {
  data() {
    return {
      zhifu: [],
      id: "",
    };
  },

  created() {
    this.fun1();
  },

  methods: {
    dianji(res) {
      this.$router.push({
        name: "particulars",
        params: {
          jj:res
        },
      });
    },
    wwdij() {
      this.$router.push("/homepage");
    },
    sshi1() {
      this.$router.push("/Refer");
    },
    fun() {
      ff({
        type: 0,
        min_time: "2023-04-11",
        max_time: "2023-06-01",
      }).then((res) => {
        if (res.code == 200) {
          this.zhifu = res.data;
        this.id = res.data[0].id;
        }else{
          Dialog({ title: "温馨提示", message: res.msg });
        }
      });
    },
    fun1(){
      let creat = this.$route.params.createTime
      let s = typeof(creat) == "undefined"
      if(s){
        console.log(creat);
        this.fun();
      }else{
        this.zhifu =[];
        this.zhifu=creat;
      }
    }
  },
};
</script>

<style>
.jyz {
  color: rgb(255, 204, 0);
}
.wwWeChat {
  padding-top: 10px;
}
.wwWeChat2 {
  margin-left: 170px;
  margin-top: -38px;
  color: rgb(255, 162, 0);
}
.wwWeChat1 {
  margin-top: 20px;
}
#wzyamoney {
  height: 80px;
  border-bottom: 1px solid rgb(160, 157, 157);
  background-color: #ffffff;
}
#wzyamoney img {
  width: 20px;
  height: 20px;
  margin-top: -52px;
  margin-left: 340px;
}
.wwWeChat {
  margin-top: 20px;
}
.wwheader {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wwheader p {
  margin-right: -37px;
}

.wwheader img {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.wwheaderbottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wwheaderbottomleft {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.wwheaderbottomleft img {
  width: 30px;
  height: 30px;
}
.wwheaderbottomright {
  display: flex;
  align-items: center;
}

.wwheaderbottomright img {
  width: 30px;
  height: 30px;
}

.wwdate {
  width: 100%;
  background-color: rgb(243, 243, 243);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.wwdate img {
  width: 30px;
  height: 30px;
}

.wwdate li {
  width: 20%;
  height: 30px;
  background-color: rgb(255, 255, 255);
  list-style: none;
  text-align: center;
  line-height: 30px;

  border-radius: 10px;
  margin: 10px;
}

.wwdate a {
  text-decoration: none;
  color: black;
}

.wwlast a {
  width: 120px;
  display: flex;
  margin-left: 15px;
}

.wwsection li {
  width: 100%;
  margin-top: 20px;
  border-bottom: 1px solid rgb(197, 197, 197);
}

.wwsection a {
  text-decoration: none;
  color: black;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.wwsectionleft p {
  margin: 0 0 10px 10px;
}

.wwsectionright {
  display: flex;
  flex-direction: column;
  margin-left: 130px;
}

.wwsectionright p {
  margin-bottom: 10px;
}

.wwsection img {
  width: 20px;
  height: 20px;
  margin: 18px;
}
</style>